
<script setup>
import { ref, reactive } from 'vue';
const isAll = ref(false);

const dataList = reactive([
  {
    name: '商品1',
    price: 10, // 单价
    number: 1,  // 数量
    id: 1,
    limit: 5, // 限购数量
    checked: false,
    pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
  },
  {
    name: '商品2',
    price: 20, // 单价
    number: 2,  // 数量
    id: 2,
    limit: 10, // 限购数量
    checked: false,
    pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
  },
  {
    name: '商品3',
    price: 30, // 单价
    number: 3,  // 数量
    id: 3,
    limit: 15, // 限购数量
    checked: false,
    pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
  }
]);

const checkList = reactive([]);

const handleCheckBox = (item) => {
  if(checkList.includes(item)) {
    checkList.splice(checkList.indexOf(item), 1);
    dataList[dataList.indexOf(item)].checked = false;
  }else {
    checkList.push(item);
    dataList[dataList.indexOf(item)].checked = true;
  }
  isAllChecked();
};

// 判断当前是否全部选中
const isAllChecked = () => {
  if(checkList.length === dataList.length) {
    isAll.value = true;
  }else {
    isAll.value = false;
  }
}

const sum = () => {
  let total = 0;
  checkList.forEach(item => {
    total += item.price * item.number;
  });
  return total;
};

//删除商品
const handleDelete = (index,id) => {
  dataList.splice(index, 1);
  let newCheckList = checkList.filter(item => item.id !== id);
  checkList.splice(0, checkList.length, ...newCheckList);
  isAllChecked();
  console.log('newCheckList',  checkList);
};

// 全选/全不选
const handleAllChange = () => {
  console.log('isAll=====>', isAll.value);
  if(isAll.value) {
    console.log('当前全选是====>', isAll);
    checkList.splice(0, checkList.length, ...dataList);
    dataList.forEach(item => {
      item.checked = true;
    });
  }else {
    console.log('当前全部取消====>', isAll);
    checkList.splice(0, checkList.length);
    dataList.forEach(item => {
      item.checked = false;
    })
  }
}

</script>

<template>
  <div>
    <div class="shopping_cart_title">购物车</div>

    <div class="cart_box">

      <div class="df aic">
        <input type="checkbox" v-model="isAll" @change="handleAllChange" /><span>全选/全不选</span>
      </div>

      <ul class="">

        <li class="df jcsb" v-for="(item, index) in dataList" :key="item.id" style="margin-bottom: 20px;">
          <input type="checkbox" v-model="item.checked"  @change="handleCheckBox(item)" />
          <img :src="item.pic" style="width: 150px;" alt="" />
          <div>
            <div>{{ item.name }}</div>
            <div style="color: red;">¥{{ item.price }}</div>
          </div>

          <div>
            <button type="button" @click="item.number--" :disabled="item.number <= 1">-</button>
            <span style="margin: 0 5px;">{{ item.number }}</span>
            <button type="button" @click="item.number++" :disabled="item.number >= item.limit">+</button>
          </div>

          <div>
            <button type="button" @click="handleDelete(index, item.id)">删除</button>
          </div>
        </li>

      </ul>

      <div style="margin-top: 20px;">总金额:{{ sum() }}</div>

      {{ checkList }}

    </div>

  </div>
</template>

<style lang="less" scoped>

.df {  display: flex; }
.jcsb {  justify-content: space-between;  }

.shopping_cart_title {
  position: relative;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}

.cart_box {
  position: relative;
  padding: 50px 100px;
}

</style>
